<template>
  <Main>
    <div class="news">
      开启商家配送的商户需设置，在发货时可选用已添加的快递公司
    </div>
    <div class="select-font">已添加的快递</div>
    <div class="selectT">
      <div class="selectT-chlid">
        <div>
          <img
            src="https://image-c.weimobwmc.com/merchant-setting/58ce008915ac43aa92777d021f785a5d.png"
          />
        </div>
        <div class="selectT-chlid-font">
          <p>顺丰</p>
          <p>
            <el-button plain type="text" style="padding:0;" @click="addTemplate"
              >删除</el-button
            >
          </p>
        </div>
      </div>
    </div>
    <div class="select-font">可添加的快递</div>
    <div class="selectF"></div>
  </Main>
</template>
<script>
import {
  SETDEFAULTTEMPLETE,
  DISTRIBUTIONTEMPLETECOPY,
  DISTRIBUTIONTEMPLETELIST
} from "../../../service";

export default {
  components: {},
  data() {
    return {
      listData: [],
      totals: 0,
      pages: 0,
      shows: "list",
      privilege: "",
      card_id: "",
      editCardId: "",
      send: false,
      options: "first"
    };
  },

  created() {
    this.getList();
  },
  methods: {
    async raChange(templeteId, index) {
      this.listData[index].is_default = 0;
      await SETDEFAULTTEMPLETE({ templete_id: templeteId }).then(res => {
        let { code, msg } = res;
        if (code === 200) this.getList();
        this.$message({
          message: msg,
          type: code === 200 ? "success" : "error"
        });
      });
    },
    out() {
      this.shows = "list";
      this.$emit("showTag", true);
      this.getList();
    },
    async copy(templeteId) {
      await DISTRIBUTIONTEMPLETECOPY({ templete_id: templeteId }).then(
        ({ code, msg }) => {
          if (code === 200) this.getList();
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        }
      );
    },
    async getList() {
      await DISTRIBUTIONTEMPLETELIST({ page: this.pages, pageshow: 5 }).then(
        ({ code, data, msg }) => {
          if (code === 200) {
            this.totals = data.count;
            data.list.forEach(ele => {
              ele.planJson = JSON.parse(ele.planJson);
              ele.is_default = ele.is_default === 1 ? "1" : "0";
            });
            this.listData = data.list;
          } else {
            this.$message.error(msg);
          }
        }
      );
    },
    changes(page) {
      this.pages = page;
      this.getList();
    },

    setTable(tableData) {
      let spanOneArr = [];
      tableData.forEach(item => {
        spanOneArr.push(item.planJson.length);
      });
      return {
        one: spanOneArr
      };
    },
    objectOneMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 5) {
        const _row = this.setTable(this.listData).one[rowIndex];
        return {
          rowspan: _row,
          colspan: 1
        };
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.tabs {
  width: 154px;
  margin-left: 60px;
}
.news {
  height: 80px;
  text-align: left;
  line-height: 80px;
  color: #909399;
  font-size: 12px;
}
.select-font {
  width: 100%;
  height: 80px;
  line-height: 80px;
  font-weight: bold;
  text-align: left;
}
.selectT {
  width: 100%;
  min-height: 140px;
  .selectT-chlid {
    width: 180px;
    height: 120px;
    border-radius: 6px;
    border: 1px solid;
    p {
      width: 50%;
      float: left;
    }
  }
}
</style>
